<template>
    <el-container>
        <!-- 登录人操作弹出框 -->
        <el-dialog title="个人信息" :visible.sync="dialogTableVisible1">
            <!-- <el-table> -->
            <el-card class="box-card">
                <p>账号：{{personalInformation.account}}</p>
                <p>姓名：{{personalInformation.uname}}</p>
                <p>年龄：{{personalInformation.age}}</p>
                <p>性别：{{personalInformation.sex}}</p>
            </el-card>
        </el-dialog>
        <el-dialog title="修改密码" :visible.sync="dialogTableVisible2">
            <el-form :model="changePwdData" status-icon ref="ruleForm2" label-width="100px" class="demo-ruleForm">
                <el-form-item label="旧密码" prop="oldpwd">
                    <el-input type="text" v-model="changePwdData.oldpwd" placeholder="请输入旧密码"></el-input>
                </el-form-item>
                <el-form-item label="新密码" prop="newpwd1">
                    <el-input type="text" v-model="changePwdData.newpwd1" auto-complete="off" placeholder="请输入修改后的密码">
                    </el-input>
                </el-form-item>
                <el-form-item label="确认新密码" prop="newpwd2">
                    <el-input type="text" v-model="changePwdData.newpwd2" auto-complete="off" placeholder="请在此输入新密码">
                    </el-input>
                </el-form-item>

                <el-form-item>
                    <el-button type="primary"
                        @click="submitForm(changePwdData.oldpwd,changePwdData.newpwd1,changePwdData.newpwd2)">提交
                    </el-button>
                    <el-button @click="resetForm('ruleForm2')">重置</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>

        <!-- 头部 -->
        <el-header>
            <!-- logo -->
            <div class="logo">
                <img src="../assets/logo.png" alt="">
            </div>
            <!-- 标题 -->
            <h2>后台管理</h2>
            <!-- 登录人展示区 -->
            <div class="information">
                <span class="demonstration">管理员：</span>
                <el-dropdown @command="handleCommand">
                    <span class="el-dropdown-link">
                        {{uname}}<i class="el-icon-arrow-down el-icon--right"></i>
                    </span>
                    <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item command="a">
                            <el-button type="text" @click="dialogTableVisible1 = true">个人信息</el-button>

                        </el-dropdown-item>
                        <el-dropdown-item command="b">
                            <el-button type="text" @click="dialogTableVisible2 = true">修改密码</el-button>
                        </el-dropdown-item>
                        <el-dropdown-item command="c">
                            <el-button type="text" @click="logOut">退出登录</el-button>
                        </el-dropdown-item>
                    </el-dropdown-menu>
                </el-dropdown>
            </div>
        </el-header>
        <el-container>
            <!-- 侧边导航栏 -->
            <el-aside>
                <el-row class="tac">
                    <el-col>
                        <el-menu default-active="2" class="el-menu-vertical-demo" background-color="rgb(226, 220, 231)">
                            <el-submenu index="1">
                                <template slot="title">
                                    <i class="el-icon-location"></i>
                                    <span>账户管理</span>
                                </template>
                                <el-menu-item-group>
                                    <router-link :to="{name:'administration'}">
                                        <el-menu-item index="1-1">
                                            管理员账户
                                        </el-menu-item>
                                    </router-link>
                                    <router-link :to="{name:'user'}">
                                        <el-menu-item index="1-2">
                                            用户账户
                                        </el-menu-item>
                                    </router-link>

                                </el-menu-item-group>
                            </el-submenu>
                            <el-submenu index="2">
                                <template slot="title">
                                    <i class="el-icon-menu"></i>
                                    <span slot="title">商品管理</span>
                                </template>
                                <el-menu-item-group>
                                    <router-link :to="{name:'commodityList'}">
                                        <el-menu-item index="1-1">
                                            商品信息
                                        </el-menu-item>
                                    </router-link>
                                    <router-link :to="{name:'addCommodity'}">
                                        <el-menu-item index="1-2">
                                            添加商品
                                        </el-menu-item>
                                    </router-link>
                                </el-menu-item-group>
                            </el-submenu>

                            <el-submenu index="3">
                                <template slot="title">
                                    <i class="el-icon-setting"></i>
                                    <span slot="title">导航</span>
                                </template>
                                <el-menu-item-group>
                                    <el-menu-item index="1-2">

                                        <router-link :to="{name:'additional'}">附加功能</router-link>
                                    </el-menu-item>

                                </el-menu-item-group>
                            </el-submenu>

                        </el-menu>
                    </el-col>
                </el-row>
            </el-aside>
            <!-- main -->
            <el-main>
                <router-view></router-view>
            </el-main>
        </el-container>
    </el-container>
</template>

<script>
import { Message } from 'element-ui'
export default {
    name: 'home',
    data() {
        var checkAge = (rule, value, callback) => {
            if (!value) {
                return callback(new Error('年龄不能为空'));
            }
            setTimeout(() => {
                if (!Number.isInteger(value)) {
                    callback(new Error('请输入数字值'));
                } else {
                    if (value < 18) {
                        callback(new Error('必须年满18岁'));
                    } else {
                        callback();
                    }
                }
            }, 1000);
        };
        var validatePass = (rule, value, callback) => {
            if (value === '') {
                callback(new Error('请输入密码'));
            } else {
                if (this.ruleForm2.checkPass !== '') {
                    this.$refs.ruleForm2.validateField('checkPass');
                }
                callback();
            }
        };
        var validatePass2 = (rule, value, callback) => {
            if (value === '') {
                callback(new Error('请再次输入密码'));
            } else if (value !== this.ruleForm2.pass) {
                callback(new Error('两次输入密码不一致!'));
            } else {
                callback();
            }
        };
        return {
            // 登录名姓名
            uname: '',
            dialogTableVisible1: false,
            dialogTableVisible2: false,
            // 路由数组
            navRoute: [],
            gridData: '',
            // 修改密码的新旧值
            changePwdData: {
                newpwd1: '',
                newpwd2: '',
                oldpwd: ''
            },
            // 登录人信息
            personalInformation: {}
        }
    },
    methods: {
        // 退出登录
        logOut() {
            //清空token
            sessionStorage.removeItem('token')

            //重定向到login
            this.$router.push('/')
        },
        handleCommand(command) {
            // this.$message('click on item ' + command);
        },
        // 修改密码的提交事件
        submitForm(old, n1, n2) {
            // 判断新两次是否一致密码
            if (n1 == n2) {
                // 正确后执行修改
                if (this.personalInformation.pword == old) {
                    console.log('ssss')
                    this.$axios.get(`http://localhost:8080/api/updataPword?account=${this.personalInformation.account}&&pword=${n1}`).then(res => {
                        Message.success('修改成功！！！')
                    }, err => {
                        Message.error('修改失败！！！')
                    })
                } else Message.error('旧密码错误！！修改失败！')

            } else {
                Message.error('两次密码不一致，请确认后重新输入！')
            }
        },
        // 修改密码的重置事件事件
        resetForm(formName) {
            this.$refs[formName].resetFields();
        },
    },
    computed: {

    },

    mounted() {
        // 路由信息
        // this.navRoute = this.$router.getRoutes().filter(v => v.meta.isShow)
        // console.log(this.navRoute.length)
        // this.navRoute.forEach(v => console.log(v.meta.name))
        // 获取登录成功的管理员姓名
        this.uname = sessionStorage.getItem('uname')
        // 儲存個人信息
        let data = JSON.parse(sessionStorage.getItem('obtainAdminInformation'))
        this.personalInformation = data
    }
}
</script>

<style scoped lang="less">
.text {
    font-size: 14px;
}

.item {
    padding: 18px 0;
}

.box-card {
    width: 480px;
}

.el-button--text {
    color: black;
}

.el-header {
    background-color: rgb(231, 239, 236);
    display: flex;
    line-height: 60px;
    text-align: center;
    justify-content: space-between;

    img {
        height: 60px;
    }

    .logo {
        width: 300px;
    }

    .information {
        margin-right: 50px;
    }

    .demonstration {
        color: black;
        font-size: 18px;
    }

    .el-dropdown-link {
        cursor: pointer;
        color: #019898;
        font-size: 19px;
    }

}

.el-aside {
    height: calc(100vh - 60px);
    background-color: rgb(226, 220, 231);
}
</style>